<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医疗预约挂号APP原型</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            padding: 20px;
        }

        .prototype-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .screen {
            width: 300px;
            height: 600px;
            background-color: white;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border: 10px solid #222;
        }

        .screen-title {
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
            color: #333;
        }

        .status-bar {
            height: 30px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            font-size: 12px;
            color: #333;
            border-bottom: 1px solid #eee;
        }

        .status-bar .time {
            font-weight: bold;
        }

        .nav-bar {
            height: 44px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            border-bottom: 1px solid #eee;
        }

        .nav-bar .title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .nav-bar .back {
            color: #007aff;
            font-size: 16px;
        }

        .tab-bar {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eee;
        }

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #888;
            font-size: 10px;
        }

        .tab-item.active {
            color: #007aff;
        }

        .tab-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }

        .button {
            background-color: #007aff;
            color: white;
            padding: 12px 20px;
            border-radius: 10px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0;
        }

        .button.secondary {
            background-color: #f2f2f7;
            color: #007aff;
        }

        .input-field {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 10px;
            margin: 8px 0;
            font-size: 16px;
        }

        .content {
            padding: 15px;
            height: calc(100% - 74px);
            overflow-y: auto;
        }

        .full-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #007aff;
            color: white;
            text-align: center;
        }

        .card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin: 10px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .divider {
            height: 1px;
            background-color: #eee;
            margin: 10px 0;
        }

        /* 特定页面样式 */
        .welcome-logo {
            font-size: 60px;
            margin-bottom: 20px;
        }

        .welcome-title {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .welcome-subtitle {
            font-size: 16px;
            opacity: 0.8;
            margin-bottom: 40px;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center; margin-bottom: 30px; color: #333;">医疗预约挂号APP原型设计</h1>

    <div class="prototype-container">
        <!-- 启动页/引导页 -->
        <div>
            <div class="screen">
                <div class="full-content">
                    <i class="fas fa-heartbeat welcome-logo"></i>
                    <div class="welcome-title">医预通</div>
                    <div class="welcome-subtitle">便捷的线上预约挂号平台</div>
                    <div class="button" style="width: 200px;">立即体验</div>
                </div>
            </div>
            <div class="screen-title">启动页</div>
        </div>

        <!-- 登录页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:21</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">登录</div>
                    <div></div>
                </div>
                <div class="content">
                    <div style="margin-top: 40px; text-align: center;">
                        <i class="fas fa-heartbeat" style="font-size: 50px; color: #007aff;"></i>
                        <h2 style="margin: 20px 0; color: #333;">医预通</h2>
                    </div>

                    <div style="margin-top: 40px;">
                        <input type="text" class="input-field" placeholder="手机号码">
                        <div style="position: relative;">
                            <input type="password" class="input-field" placeholder="密码">
                            <i class="fas fa-eye" style="position: absolute; right: 15px; top: 15px; color: #999;"></i>
                        </div>

                        <div style="text-align: right; margin: 10px 0;">
                            <a href="#" style="color: #007aff; text-decoration: none; font-size: 14px;">忘记密码?</a>
                        </div>

                        <div class="button">登录</div>

                        <div style="text-align: center; margin: 20px 0;">
                            <span style="color: #999; font-size: 14px;">还没有账号? </span>
                            <a href="#" style="color: #007aff; text-decoration: none; font-size: 14px;">立即注册</a>
                        </div>

                        <div style="margin-top: 40px;">
                            <div style="display: flex; align-items: center; margin: 20px 0;">
                                <div style="flex: 1; height: 1px; background-color: #eee;"></div>
                                <div style="margin: 0 10px; color: #999; font-size: 14px;">其他登录方式</div>
                                <div style="flex: 1; height: 1px; background-color: #eee;"></div>
                            </div>

                            <div style="display: flex; justify-content: center; gap: 30px;">
                                <i class="fab fa-weixin" style="font-size: 30px; color: #07C160;"></i>
                                <i class="fa-solid fa-mobile-screen" style="font-size: 30px; color: #007aff;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screen-title">登录页面</div>
        </div>

        <!-- 注册页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:22</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">注册</div>
                    <div></div>
                </div>
                <div class="content">
                    <div style="margin-top: 20px;">
                        <input type="text" class="input-field" placeholder="手机号码">

                        <div style="position: relative; margin: 15px 0;">
                            <input type="text" class="input-field" placeholder="验证码">
                            <button
                                style="position: absolute; right: 5px; top: 5px; background: none; border: none; color: #007aff; padding: 8px;">获取验证码</button>
                        </div>

                        <input type="password" class="input-field" placeholder="设置密码">
                        <input type="password" class="input-field" placeholder="确认密码">

                        <div style="margin: 15px 0; display: flex; align-items: center;">
                            <i class="far fa-check-square" style="color: #007aff; margin-right: 10px;"></i>
                            <span style="font-size: 14px; color: #666;">我已阅读并同意<a href="#"
                                    style="color: #007aff; text-decoration: none;">用户协议</a>和<a href="#"
                                    style="color: #007aff; text-decoration: none;">隐私政策</a></span>
                        </div>

                        <div class="button">注册</div>

                        <div style="text-align: center; margin: 20px 0;">
                            <span style="color: #999; font-size: 14px;">已有账号? </span>
                            <a href="#" style="color: #007aff; text-decoration: none; font-size: 14px;">立即登录</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screen-title">注册页面</div>
        </div>

        <!-- 首页 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:25</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="title">医预通</div>
                    <div style="font-size: 18px;"><i class="fas fa-bell"></i></div>
                </div>
                <div class="content" style="padding: 10px; background-color: #f5f5f5;">
                    <!-- 搜索框 -->
                    <div style="position: relative; margin-bottom: 15px;">
                        <i class="fas fa-search" style="position: absolute; left: 12px; top: 12px; color: #999;"></i>
                        <input type="text" class="input-field" placeholder="搜索医院、科室或医生" style="padding-left: 35px;">
                    </div>

                    <!-- 轮播图 -->
                    <div
                        style="height: 120px; background-color: #e1f5fe; border-radius: 10px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;">
                        <div style="text-align: center; color: #0277bd;">
                            <i class="fas fa-hand-holding-medical" style="font-size: 30px; margin-bottom: 10px;"></i>
                            <div>预防接种专区</div>
                        </div>
                        <div style="position: absolute; bottom: 10px; display: flex; gap: 5px;">
                            <i class="fas fa-circle" style="font-size: 8px; color: #0277bd;"></i>
                            <i class="fas fa-circle" style="font-size: 8px; color: #ccc;"></i>
                            <i class="fas fa-circle" style="font-size: 8px; color: #ccc;"></i>
                        </div>
                    </div>

                    <!-- 功能导航 -->
                    <div
                        style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center; margin-bottom: 15px;">
                        <div>
                            <div
                                style="width: 50px; height: 50px; border-radius: 10px; background-color: #e3f2fd; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                <i class="fas fa-hospital" style="font-size: 24px; color: #1976d2;"></i>
                            </div>
                            <div style="font-size: 12px; margin-top: 5px;">找医院</div>
                        </div>
                        <div>
                            <div
                                style="width: 50px; height: 50px; border-radius: 10px; background-color: #e8f5e9; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                <i class="fas fa-stethoscope" style="font-size: 24px; color: #388e3c;"></i>
                            </div>
                            <div style="font-size: 12px; margin-top: 5px;">找科室</div>
                        </div>
                        <div>
                            <div
                                style="width: 50px; height: 50px; border-radius: 10px; background-color: #fff3e0; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                <i class="fas fa-user-md" style="font-size: 24px; color: #f57c00;"></i>
                            </div>
                            <div style="font-size: 12px; margin-top: 5px;">找医生</div>
                        </div>
                        <div>
                            <div
                                style="width: 50px; height: 50px; border-radius: 10px; background-color: #fce4ec; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                <i class="fas fa-clipboard-list" style="font-size: 24px; color: #d81b60;"></i>
                            </div>
                            <div style="font-size: 12px; margin-top: 5px;">我的预约</div>
                        </div>
                    </div>

                    <!-- 健康直通车 -->
                    <div style="margin-bottom: 15px;">
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <div style="font-weight: bold;">健康直通车</div>
                            <div style="font-size: 12px; color: #666;">更多 <i class="fas fa-chevron-right"
                                    style="font-size: 10px;"></i></div>
                        </div>
                        <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;">
                            <div
                                style="min-width: 120px; background-color: white; border-radius: 10px; padding: 10px; text-align: center;">
                                <i class="fas fa-heartbeat"
                                    style="font-size: 30px; color: #f44336; margin-bottom: 5px;"></i>
                                <div style="font-size: 12px;">心脏科</div>
                            </div>
                            <div
                                style="min-width: 120px; background-color: white; border-radius: 10px; padding: 10px; text-align: center;">
                                <i class="fas fa-brain"
                                    style="font-size: 30px; color: #9c27b0; margin-bottom: 5px;"></i>
                                <div style="font-size: 12px;">神经科</div>
                            </div>
                            <div
                                style="min-width: 120px; background-color: white; border-radius: 10px; padding: 10px; text-align: center;">
                                <i class="fas fa-tooth"
                                    style="font-size: 30px; color: #2196f3; margin-bottom: 5px;"></i>
                                <div style="font-size: 12px;">口腔科</div>
                            </div>
                        </div>
                    </div>

                    <!-- 附近医院 -->
                    <div>
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <div style="font-weight: bold;">附近医院</div>
                            <div style="font-size: 12px; color: #666;">查看全部 <i class="fas fa-chevron-right"
                                    style="font-size: 10px;"></i></div>
                        </div>
                        <div class="card" style="display: flex; align-items: center; gap: 10px;">
                            <img src="https://via.placeholder.com/60"
                                style="width: 60px; height: 60px; border-radius: 5px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">协和医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">三甲 | 综合医院</div>
                                <div style="font-size: 12px; color: #666;">距离: 1.2km</div>
                            </div>
                            <div class="button" style="padding: 8px 15px; font-size: 14px;">预约</div>
                        </div>
                        <div class="card" style="display: flex; align-items: center; gap: 10px;">
                            <img src="https://via.placeholder.com/60"
                                style="width: 60px; height: 60px; border-radius: 5px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">人民医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">三甲 | 综合医院</div>
                                <div style="font-size: 12px; color: #666;">距离: 2.5km</div>
                            </div>
                            <div class="button" style="padding: 8px 15px; font-size: 14px;">预约</div>
                        </div>
                    </div>
                </div>
                <!-- 底部标签栏 -->
                <div class="tab-bar">
                    <div class="tab-item active">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-hospital"></i>
                        <span>医院</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-calendar-check"></i>
                        <span>预约</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            <div class="screen-title">首页</div>
        </div>

        <!-- 医院列表页 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:30</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="title">医院列表</div>
                    <div><i class="fas fa-search" style="font-size: 18px; color: #333;"></i></div>
                </div>
                <div class="content" style="padding: 0; background-color: #f5f5f5;">
                    <!-- 筛选栏 -->
                    <div
                        style="display: flex; padding: 10px 15px; background-color: white; border-bottom: 1px solid #eee;">
                        <div
                            style="flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 14px; color: #333;">
                            区域 <i class="fas fa-chevron-down" style="font-size: 10px;"></i>
                        </div>
                        <div style="width: 1px; height: 20px; background-color: #eee;"></div>
                        <div
                            style="flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 14px; color: #333;">
                            医院等级 <i class="fas fa-chevron-down" style="font-size: 10px;"></i>
                        </div>
                        <div style="width: 1px; height: 20px; background-color: #eee;"></div>
                        <div
                            style="flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 14px; color: #333;">
                            综合排序 <i class="fas fa-chevron-down" style="font-size: 10px;"></i>
                        </div>
                    </div>

                    <!-- 医院列表 -->
                    <div style="padding: 10px;">
                        <div class="card" style="display: flex; align-items: center; gap: 10px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 5px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">北京协和医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">三甲 | 综合医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">地址: 北京市东城区帅府园1号</div>
                                <div style="display: flex; gap: 10px;">
                                    <span
                                        style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">医保定点</span>
                                    <span
                                        style="background-color: #e8f5e9; color: #388e3c; font-size: 10px; padding: 2px 5px; border-radius: 3px;">可线上挂号</span>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="display: flex; align-items: center; gap: 10px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 5px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">北京大学第一医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">三甲 | 综合医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">地址: 北京市西城区西什库大街8号</div>
                                <div style="display: flex; gap: 10px;">
                                    <span
                                        style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">医保定点</span>
                                    <span
                                        style="background-color: #e8f5e9; color: #388e3c; font-size: 10px; padding: 2px 5px; border-radius: 3px;">可线上挂号</span>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="display: flex; align-items: center; gap: 10px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 5px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">中国人民解放军总医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">三甲 | 综合医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">地址: 北京市海淀区复兴路28号</div>
                                <div style="display: flex; gap: 10px;">
                                    <span
                                        style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">医保定点</span>
                                    <span
                                        style="background-color: #e8f5e9; color: #388e3c; font-size: 10px; padding: 2px 5px; border-radius: 3px;">可线上挂号</span>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="display: flex; align-items: center; gap: 10px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 5px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">北京友谊医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">三甲 | 综合医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">地址: 北京市西城区永安路95号</div>
                                <div style="display: flex; gap: 10px;">
                                    <span
                                        style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">医保定点</span>
                                    <span
                                        style="background-color: #e8f5e9; color: #388e3c; font-size: 10px; padding: 2px 5px; border-radius: 3px;">可线上挂号</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部标签栏 -->
                <div class="tab-bar">
                    <div class="tab-item">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item active">
                        <i class="fas fa-hospital"></i>
                        <span>医院</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-calendar-check"></i>
                        <span>预约</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            <div class="screen-title">医院列表页</div>
        </div>

        <!-- 医院详情页 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:35</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">协和医院</div>
                    <div><i class="far fa-heart" style="font-size: 18px;"></i></div>
                </div>
                <div class="content" style="padding: 0; background-color: #f5f5f5;">
                    <!-- 医院基本信息 -->
                    <div style="background-color: white; padding: 15px;">
                        <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                            <img src="https://via.placeholder.com/80"
                                style="width: 80px; height: 80px; border-radius: 5px;">
                            <div>
                                <div style="font-weight: bold; font-size: 18px; margin-bottom: 5px;">协和医院</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">三甲 | 综合医院</div>
                                <div style="display: flex; gap: 10px; margin-bottom: 5px;">
                                    <span
                                        style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">医保定点</span>
                                    <span
                                        style="background-color: #e8f5e9; color: #388e3c; font-size: 10px; padding: 2px 5px; border-radius: 3px;">可线上挂号</span>
                                </div>
                                <div style="font-size: 12px;">
                                    <i class="fas fa-map-marker-alt" style="color: #f44336;"></i>
                                    <span style="color: #666;">北京市东城区帅府园1号</span>
                                </div>
                            </div>
                        </div>
                        <div
                            style="display: flex; justify-content: space-around; border-top: 1px solid #eee; padding-top: 15px;">
                            <div style="text-align: center;">
                                <i class="fas fa-phone" style="color: #2196f3; font-size: 20px;"></i>
                                <div style="font-size: 12px; margin-top: 5px;">联系电话</div>
                            </div>
                            <div style="text-align: center;">
                                <i class="fas fa-location-arrow" style="color: #4caf50; font-size: 20px;"></i>
                                <div style="font-size: 12px; margin-top: 5px;">导航</div>
                            </div>
                            <div style="text-align: center;">
                                <i class="fas fa-share-alt" style="color: #ff9800; font-size: 20px;"></i>
                                <div style="font-size: 12px; margin-top: 5px;">分享</div>
                            </div>
                        </div>
                    </div>

                    <!-- 科室导航 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div style="font-weight: bold; margin-bottom: 15px;">科室导航</div>
                        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #e3f2fd; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-heartbeat" style="color: #1976d2;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">心内科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #e8f5e9; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-lungs" style="color: #388e3c;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">呼吸科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #fff3e0; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-brain" style="color: #f57c00;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">神经科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #fce4ec; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-bone" style="color: #d81b60;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">骨科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #e0f7fa; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-eye" style="color: #00acc1;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">眼科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #f3e5f5; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-tooth" style="color: #8e24aa;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">口腔科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #fff8e1; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-child" style="color: #ffc107;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">儿科</div>
                            </div>
                            <div style="width: calc(25% - 8px); text-align: center;">
                                <div
                                    style="background-color: #f1f8e9; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
                                    <i class="fas fa-ellipsis-h" style="color: #689f38;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">更多</div>
                            </div>
                        </div>
                    </div>

                    <!-- 专家推荐 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <div style="font-weight: bold;">专家推荐</div>
                            <div style="font-size: 12px; color: #666;">查看全部 <i class="fas fa-chevron-right"
                                    style="font-size: 10px;"></i></div>
                        </div>
                        <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;">
                            <div style="min-width: 120px; text-align: center;">
                                <img src="https://via.placeholder.com/80"
                                    style="width: 80px; height: 80px; border-radius: 40px; margin-bottom: 5px;">
                                <div style="font-weight: bold; font-size: 14px;">张医生</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">主任医师</div>
                                <div
                                    style="background-color: #e3f2fd; color: #1976d2; font-size: 12px; padding: 3px 0; border-radius: 15px;">
                                    心内科</div>
                            </div>
                            <div style="min-width: 120px; text-align: center;">
                                <img src="https://via.placeholder.com/80"
                                    style="width: 80px; height: 80px; border-radius: 40px; margin-bottom: 5px;">
                                <div style="font-weight: bold; font-size: 14px;">李医生</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">副主任医师</div>
                                <div
                                    style="background-color: #e8f5e9; color: #388e3c; font-size: 12px; padding: 3px 0; border-radius: 15px;">
                                    神经科</div>
                            </div>
                            <div style="min-width: 120px; text-align: center;">
                                <img src="https://via.placeholder.com/80"
                                    style="width: 80px; height: 80px; border-radius: 40px; margin-bottom: 5px;">
                                <div style="font-weight: bold; font-size: 14px;">王医生</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">主任医师</div>
                                <div
                                    style="background-color: #fff3e0; color: #f57c00; font-size: 12px; padding: 3px 0; border-radius: 15px;">
                                    骨科</div>
                            </div>
                        </div>
                    </div>

                    <!-- 医院介绍 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div style="font-weight: bold; margin-bottom: 10px;">医院介绍</div>
                        <div style="font-size: 14px; color: #666; line-height: 1.5;">
                            协和医院始建于1921年，是一所集医疗、教学、科研为一体的现代化综合性三级甲等医院，也是国家重点科技创新基地。医院设有内科、外科、妇产科、儿科等临床科室，拥有一批国内外知名的医学专家...
                            <span style="color: #007aff;">展开更多</span>
                        </div>
                    </div>
                </div>
                <div
                    style="position: absolute; bottom: 0; width: 100%; background-color: white; padding: 10px 15px; border-top: 1px solid #eee; display: flex; gap: 10px;">
                    <div
                        style="font-size: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-right: 10px; border-right: 1px solid #eee;">
                        <i class="fas fa-comments" style="font-size: 20px; color: #999;"></i>
                        <span style="color: #999; font-size: 12px;">客服</span>
                    </div>
                    <div class="button" style="flex: 1; text-align: center;">立即预约</div>
                </div>
            </div>
            <div class="screen-title">医院详情页</div>
        </div>

        <!-- 医生列表页 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:40</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">心内科医生</div>
                    <div><i class="fas fa-filter" style="font-size: 18px; color: #333;"></i></div>
                </div>
                <div class="content" style="padding: 0; background-color: #f5f5f5;">
                    <!-- 筛选栏 -->
                    <div
                        style="display: flex; padding: 10px 15px; background-color: white; border-bottom: 1px solid #eee;">
                        <div
                            style="flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 14px; color: #007aff;">
                            全部医生 <i class="fas fa-chevron-down" style="font-size: 10px;"></i>
                        </div>
                        <div style="width: 1px; height: 20px; background-color: #eee;"></div>
                        <div
                            style="flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 14px; color: #333;">
                            出诊日期 <i class="fas fa-chevron-down" style="font-size: 10px;"></i>
                        </div>
                        <div style="width: 1px; height: 20px; background-color: #eee;"></div>
                        <div
                            style="flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 14px; color: #333;">
                            综合排序 <i class="fas fa-chevron-down" style="font-size: 10px;"></i>
                        </div>
                    </div>

                    <!-- 医生列表 -->
                    <div style="padding: 10px;">
                        <div class="card" style="display: flex; gap: 15px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 35px;">
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <div style="font-weight: bold;">张医生</div>
                                    <div style="color: #f44336; font-weight: bold; font-size: 14px;">￥150</div>
                                </div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">主任医师 | 心内科</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 8px;">协和医院</div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="display: flex; gap: 5px;">
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">心脏病</span>
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">高血压</span>
                                    </div>
                                    <div class="button" style="padding: 5px 15px; font-size: 12px;">预约</div>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="display: flex; gap: 15px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 35px;">
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <div style="font-weight: bold;">王医生</div>
                                    <div style="color: #f44336; font-weight: bold; font-size: 14px;">￥120</div>
                                </div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">副主任医师 | 心内科</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 8px;">协和医院</div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="display: flex; gap: 5px;">
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">冠心病</span>
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">心律失常</span>
                                    </div>
                                    <div class="button" style="padding: 5px 15px; font-size: 12px;">预约</div>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="display: flex; gap: 15px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 35px;">
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <div style="font-weight: bold;">李医生</div>
                                    <div style="color: #f44336; font-weight: bold; font-size: 14px;">￥100</div>
                                </div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">主治医师 | 心内科</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 8px;">协和医院</div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="display: flex; gap: 5px;">
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">心衰</span>
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">心肌病</span>
                                    </div>
                                    <div class="button" style="padding: 5px 15px; font-size: 12px;">预约</div>
                                </div>
                            </div>
                        </div>

                        <div class="card" style="display: flex; gap: 15px;">
                            <img src="https://via.placeholder.com/70"
                                style="width: 70px; height: 70px; border-radius: 35px;">
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <div style="font-weight: bold;">赵医生</div>
                                    <div style="color: #f44336; font-weight: bold; font-size: 14px;">￥120</div>
                                </div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 5px;">副主任医师 | 心内科</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 8px;">协和医院</div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="display: flex; gap: 5px;">
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">先心病</span>
                                        <span
                                            style="background-color: #e1f5fe; color: #0277bd; font-size: 10px; padding: 2px 5px; border-radius: 3px;">心绞痛</span>
                                    </div>
                                    <div class="button" style="padding: 5px 15px; font-size: 12px;">预约</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screen-title">医生列表页</div>
        </div>

        <!-- 医生详情页 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:45</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">医生详情</div>
                    <div><i class="far fa-heart" style="font-size: 18px;"></i></div>
                </div>
                <div class="content" style="padding: 0; background-color: #f5f5f5;">
                    <!-- 医生基本信息 -->
                    <div style="background-color: white; padding: 15px;">
                        <div style="display: flex; gap: 15px; margin-bottom: 15px;">
                            <img src="https://via.placeholder.com/90"
                                style="width: 90px; height: 90px; border-radius: 45px;">
                            <div>
                                <div style="font-weight: bold; font-size: 18px; margin-bottom: 5px;">张医生</div>
                                <div style="font-size: 14px; color: #666; margin-bottom: 5px;">主任医师 | 心内科</div>
                                <div style="font-size: 14px; color: #666; margin-bottom: 5px;">协和医院</div>
                                <div style="display: flex; gap: 8px;">
                                    <div style="display: flex; align-items: center; font-size: 12px; color: #ff9800;">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star-half-alt"></i>
                                        <span style="margin-left: 5px; color: #666;">4.8分</span>
                                    </div>
                                    <div style="font-size: 12px; color: #666;">| 接诊人数: 12,354</div>
                                </div>
                            </div>
                        </div>
                        <div
                            style="display: flex; justify-content: space-around; border-top: 1px solid #eee; padding-top: 15px;">
                            <div style="text-align: center;">
                                <i class="fas fa-phone" style="color: #2196f3; font-size: 20px;"></i>
                                <div style="font-size: 12px; margin-top: 5px;">联系电话</div>
                            </div>
                            <div style="text-align: center;">
                                <i class="fas fa-comment-medical" style="color: #4caf50; font-size: 20px;"></i>
                                <div style="font-size: 12px; margin-top: 5px;">在线咨询</div>
                            </div>
                            <div style="text-align: center;">
                                <i class="fas fa-share-alt" style="color: #ff9800; font-size: 20px;"></i>
                                <div style="font-size: 12px; margin-top: 5px;">分享</div>
                            </div>
                        </div>
                    </div>

                    <!-- 医生擅长 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div style="font-weight: bold; margin-bottom: 10px;">擅长领域</div>
                        <div style="font-size: 14px; color: #666; line-height: 1.5;">
                            擅长各种心血管疾病的诊断与治疗，特别是冠心病、高血压、心力衰竭、心律失常等心血管疾病的诊治，尤其在复杂心血管疾病的诊断和治疗方面有丰富的临床经验。
                        </div>
                    </div>

                    <!-- 出诊时间 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div style="font-weight: bold; margin-bottom: 10px;">出诊时间</div>
                        <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px;">
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">今天</div>
                                <div style="font-size: 12px; color: #f44336;">已满</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">明天</div>
                                <div style="font-size: 12px; color: #4caf50;">可预约</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">周三</div>
                                <div style="font-size: 12px; color: #4caf50;">可预约</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">周四</div>
                                <div style="font-size: 12px; color: #4caf50;">可预约</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">周五</div>
                                <div style="font-size: 12px; color: #999;">休息</div>
                            </div>
                        </div>
                    </div>

                    <!-- 患者评价 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <div style="font-weight: bold;">患者评价</div>
                            <div style="font-size: 12px; color: #666;">全部 264 <i class="fas fa-chevron-right"
                                    style="font-size: 10px;"></i></div>
                        </div>

                        <div style="margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <div style="font-size: 14px;">患者：李**（男，32岁）</div>
                                <div style="font-size: 12px; color: #999;">2023-07-15</div>
                            </div>
                            <div style="display: flex; margin-bottom: 8px; font-size: 12px; color: #ff9800;">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <div style="font-size: 14px; color: #333; line-height: 1.5;">
                                医生非常专业，态度也很好，解释得很清楚，让我对自己的病情有了更深入的了解，治疗效果也很明显。
                            </div>
                        </div>

                        <div>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <div style="font-size: 14px;">患者：王**（女，45岁）</div>
                                <div style="font-size: 12px; color: #999;">2023-07-10</div>
                            </div>
                            <div style="display: flex; margin-bottom: 8px; font-size: 12px; color: #ff9800;">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <div style="font-size: 14px; color: #333; line-height: 1.5;">
                                张医生很有耐心，详细讲解了我的病情和用药注意事项，非常感谢！就是等候时间有点长。
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    style="position: absolute; bottom: 0; width: 100%; background-color: white; padding: 10px 15px; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
                    <div style="color: #f44336; font-weight: bold;">挂号费：￥150.00</div>
                    <div class="button" style="padding: 10px 30px;">立即预约</div>
                </div>
            </div>
            <div class="screen-title">医生详情页</div>
        </div>

        <!-- 预约挂号页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:50</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">预约挂号</div>
                    <div></div>
                </div>
                <div class="content" style="background-color: #f5f5f5;">
                    <!-- 医生信息简介 -->
                    <div class="card" style="display: flex; gap: 10px; margin-bottom: 15px;">
                        <img src="https://via.placeholder.com/60"
                            style="width: 60px; height: 60px; border-radius: 30px;">
                        <div>
                            <div style="font-weight: bold; margin-bottom: 3px;">张医生 · 主任医师</div>
                            <div style="font-size: 12px; color: #666; margin-bottom: 3px;">心内科</div>
                            <div style="font-size: 12px; color: #666;">协和医院</div>
                        </div>
                    </div>

                    <!-- 选择就诊时间 -->
                    <div class="card">
                        <div style="font-weight: bold; margin-bottom: 15px;">选择就诊时间</div>

                        <div
                            style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px;">
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #007aff; border-radius: 8px; padding: 8px 0; background-color: #e6f2ff;">
                                <div style="font-size: 14px; color: #007aff; margin-bottom: 5px;">明天</div>
                                <div style="font-size: 12px; color: #007aff;">07-20</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">周三</div>
                                <div style="font-size: 12px; color: #666;">07-21</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">周四</div>
                                <div style="font-size: 12px; color: #666;">07-22</div>
                            </div>
                            <div
                                style="min-width: 65px; text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333; margin-bottom: 5px;">周五</div>
                                <div style="font-size: 12px; color: #666;">07-23</div>
                            </div>
                        </div>

                        <div style="font-weight: bold; margin-bottom: 10px;">选择时段</div>

                        <div
                            style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px;">
                            <div
                                style="text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0; background-color: #f5f5f5; color: #999;">
                                <div style="font-size: 14px;">08:00</div>
                                <div style="font-size: 12px;">已约满</div>
                            </div>
                            <div
                                style="text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0; background-color: #f5f5f5; color: #999;">
                                <div style="font-size: 14px;">09:00</div>
                                <div style="font-size: 12px;">已约满</div>
                            </div>
                            <div
                                style="text-align: center; border: 1px solid #007aff; border-radius: 8px; padding: 8px 0; background-color: #e6f2ff;">
                                <div style="font-size: 14px; color: #007aff;">10:00</div>
                                <div style="font-size: 12px; color: #007aff;">剩余3个</div>
                            </div>
                            <div
                                style="text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333;">11:00</div>
                                <div style="font-size: 12px; color: #4caf50;">剩余5个</div>
                            </div>
                            <div
                                style="text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333;">14:00</div>
                                <div style="font-size: 12px; color: #4caf50;">剩余8个</div>
                            </div>
                            <div
                                style="text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 8px 0;">
                                <div style="font-size: 14px; color: #333;">15:00</div>
                                <div style="font-size: 12px; color: #4caf50;">剩余10个</div>
                            </div>
                        </div>
                    </div>

                    <!-- 选择就诊人 -->
                    <div class="card">
                        <div style="font-weight: bold; margin-bottom: 15px;">选择就诊人</div>

                        <div style="display: flex; gap: 10px; margin-bottom: 15px;">
                            <div
                                style="flex: 1; border: 1px solid #007aff; border-radius: 8px; padding: 10px; background-color: #e6f2ff;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <div style="font-weight: bold; color: #007aff;">本人</div>
                                    <i class="fas fa-check-circle" style="color: #007aff;"></i>
                                </div>
                                <div style="font-size: 12px; color: #666;">张三 | 35岁 | 男</div>
                            </div>
                            <div style="flex: 1; border: 1px solid #eee; border-radius: 8px; padding: 10px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <div style="font-weight: bold;">父亲</div>
                                </div>
                                <div style="font-size: 12px; color: #666;">张大山 | 65岁 | 男</div>
                            </div>
                        </div>

                        <div style="display: flex; justify-content: center; color: #007aff; font-size: 14px;">
                            <i class="fas fa-plus-circle" style="margin-right: 5px;"></i> 添加就诊人
                        </div>
                    </div>

                    <!-- 病情描述 -->
                    <div class="card">
                        <div style="font-weight: bold; margin-bottom: 10px;">病情描述（选填）</div>
                        <textarea
                            style="width: 100%; height: 80px; border: 1px solid #eee; border-radius: 8px; padding: 10px; font-size: 14px; resize: none;"
                            placeholder="请简要描述您的症状和病情，医生将提前了解您的情况"></textarea>
                    </div>
                </div>
                <div
                    style="position: absolute; bottom: 0; width: 100%; background-color: white; padding: 10px 15px; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
                    <div style="color: #f44336; font-weight: bold;">￥150</div>
                    <div class="button" style="padding: 10px 30px;">确认预约</div>
                </div>
            </div>
            <div class="screen-title">预约挂号页</div>
        </div>

        <!-- 预约确认页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">14:55</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">确认订单</div>
                    <div></div>
                </div>
                <div class="content" style="background-color: #f5f5f5;">
                    <!-- 订单信息 -->
                    <div class="card">
                        <div style="font-weight: bold; margin-bottom: 15px;">预约信息</div>

                        <div
                            style="display: flex; margin-bottom: 15px; border-bottom: 1px solid #f5f5f5; padding-bottom: 15px;">
                            <img src="https://via.placeholder.com/50"
                                style="width: 50px; height: 50px; border-radius: 25px; margin-right: 10px;">
                            <div>
                                <div style="font-weight: bold; margin-bottom: 3px;">张医生 · 主任医师</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">心内科 · 协和医院</div>
                                <div style="font-size: 12px; color: #007aff;">2023-07-20（明天） 10:00</div>
                            </div>
                        </div>

                        <div style="margin-bottom: 10px;">
                            <div style="font-size: 14px; color: #666; margin-bottom: 5px;">就诊人</div>
                            <div>张三 | 35岁 | 男</div>
                        </div>

                        <div>
                            <div style="font-size: 14px; color: #666; margin-bottom: 5px;">病情描述</div>
                            <div>最近一个月经常感到胸闷、心慌，有时会伴随轻微胸痛，已经服用硝酸甘油但效果不理想。</div>
                        </div>
                    </div>

                    <!-- 费用信息 -->
                    <div class="card">
                        <div style="font-weight: bold; margin-bottom: 15px;">费用信息</div>

                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div>挂号费</div>
                            <div>￥150.00</div>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; margin-bottom: 10px; color: #999; font-size: 14px;">
                            <div>平台服务费</div>
                            <div>￥0.00</div>
                        </div>

                        <div style="height: 1px; background-color: #eee; margin: 10px 0;"></div>

                        <div style="display: flex; justify-content: space-between; font-weight: bold;">
                            <div>合计</div>
                            <div style="color: #f44336;">￥150.00</div>
                        </div>
                    </div>

                    <!-- 支付方式 -->
                    <div class="card">
                        <div style="font-weight: bold; margin-bottom: 15px;">支付方式</div>

                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <div style="display: flex; align-items: center;">
                                <img src="https://via.placeholder.com/30"
                                    style="width: 30px; height: 30px; margin-right: 10px;">
                                <div>微信支付</div>
                            </div>
                            <i class="fas fa-check-circle" style="color: #007aff;"></i>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <div style="display: flex; align-items: center;">
                                <img src="https://via.placeholder.com/30"
                                    style="width: 30px; height: 30px; margin-right: 10px;">
                                <div>支付宝</div>
                            </div>
                            <i class="far fa-circle" style="color: #ddd;"></i>
                        </div>

                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div style="display: flex; align-items: center;">
                                <img src="https://via.placeholder.com/30"
                                    style="width: 30px; height: 30px; margin-right: 10px;">
                                <div>医保支付</div>
                            </div>
                            <i class="far fa-circle" style="color: #ddd;"></i>
                        </div>
                    </div>

                    <!-- 预约须知 -->
                    <div style="margin: 15px 0; font-size: 12px; color: #999; line-height: 1.5;">
                        <div style="margin-bottom: 5px;">预约须知：</div>
                        <div>1. 请至少提前30分钟到达医院</div>
                        <div>2. 请携带有效证件和医保卡（如有）</div>
                        <div>3. 如需取消预约，请提前4小时操作</div>
                    </div>
                </div>
                <div
                    style="position: absolute; bottom: 0; width: 100%; background-color: white; padding: 10px 15px; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
                    <div style="color: #f44336; font-weight: bold;">实付款：￥150.00</div>
                    <div class="button" style="padding: 10px 30px;">立即支付</div>
                </div>
            </div>
            <div class="screen-title">预约确认页</div>
        </div>

        <!-- 支付成功页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">15:00</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="back"><i class="fas fa-chevron-left"></i></div>
                    <div class="title">支付结果</div>
                    <div></div>
                </div>
                <div class="content"
                    style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 40px;">
                    <div
                        style="width: 80px; height: 80px; background-color: #4caf50; border-radius: 40px; display: flex; justify-content: center; align-items: center; margin-bottom: 20px;">
                        <i class="fas fa-check" style="font-size: 40px; color: white;"></i>
                    </div>
                    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">支付成功</div>
                    <div style="color: #666; margin-bottom: 20px;">订单金额：￥150.00</div>

                    <div class="card" style="width: 100%; text-align: left;">
                        <div style="font-weight: bold; margin-bottom: 15px;">预约详情</div>

                        <div style="display: flex; margin-bottom: 15px;">
                            <img src="https://via.placeholder.com/50"
                                style="width: 50px; height: 50px; border-radius: 25px; margin-right: 10px;">
                            <div>
                                <div style="font-weight: bold; margin-bottom: 3px;">张医生 · 主任医师</div>
                                <div style="font-size: 12px; color: #666; margin-bottom: 3px;">心内科 · 协和医院</div>
                                <div style="font-size: 12px; color: #007aff;">2023-07-20 周二 10:00</div>
                            </div>
                        </div>

                        <div style="font-size: 14px; margin-bottom: 5px;">
                            <span style="color: #666;">就诊人：</span>
                            <span>张三 | 35岁 | 男</span>
                        </div>

                        <div style="font-size: 14px; margin-bottom: 5px;">
                            <span style="color: #666;">就诊地址：</span>
                            <span>北京市东城区帅府园1号 协和医院门诊楼5层</span>
                        </div>

                        <div style="font-size: 14px;">
                            <span style="color: #666;">订单编号：</span>
                            <span>2023071912345678</span>
                        </div>
                    </div>

                    <div style="margin-top: 30px; display: flex; gap: 20px;">
                        <div class="button secondary" style="flex: 1;">查看订单</div>
                        <div class="button" style="flex: 1;">返回首页</div>
                    </div>

                    <div
                        style="margin-top: 20px; background-color: #f8f8f8; border-radius: 10px; padding: 15px; width: 100%; text-align: left;">
                        <div style="font-weight: bold; margin-bottom: 10px;">温馨提示</div>
                        <div style="font-size: 12px; color: #666; line-height: 1.6;">
                            <div>1. 请于就诊当天提前30分钟到达医院</div>
                            <div>2. 请携带身份证、医保卡等有效证件</div>
                            <div>3. 如需取消预约，请在就诊前4小时操作</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screen-title">支付成功页</div>
        </div>

        <!-- 我的预约页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">15:05</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="title">我的预约</div>
                    <div><i class="fas fa-search" style="font-size: 18px; color: #333;"></i></div>
                </div>
                <div class="content" style="padding: 10px; background-color: #f5f5f5;">
                    <!-- 状态标签 -->
                    <div
                        style="display: flex; background-color: white; border-radius: 10px; margin-bottom: 15px; overflow: hidden;">
                        <div
                            style="flex: 1; text-align: center; padding: 12px 0; color: #007aff; border-bottom: 2px solid #007aff; font-weight: bold;">
                            待就诊
                        </div>
                        <div style="flex: 1; text-align: center; padding: 12px 0; color: #666;">
                            已完成
                        </div>
                        <div style="flex: 1; text-align: center; padding: 12px 0; color: #666;">
                            已取消
                        </div>
                    </div>

                    <!-- 预约列表 -->
                    <div class="card">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div style="font-weight: bold;">协和医院</div>
                            <div style="color: #f44336; font-weight: bold;">待就诊</div>
                        </div>

                        <div
                            style="display: flex; margin-bottom: 15px; border-bottom: 1px solid #f5f5f5; padding-bottom: 15px;">
                            <img src="https://via.placeholder.com/50"
                                style="width: 50px; height: 50px; border-radius: 25px; margin-right: 10px;">
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between;">
                                    <div style="font-weight: bold;">张医生 · 心内科</div>
                                    <div style="color: #f44336;">￥150</div>
                                </div>
                                <div style="font-size: 12px; color: #666; margin: 5px 0;">主任医师</div>
                                <div style="font-size: 12px; color: #007aff;">2023-07-20（明天） 10:00</div>
                            </div>
                        </div>

                        <div style="display: flex; justify-content: space-between;">
                            <div style="font-size: 12px; color: #666;">就诊人：张三</div>
                            <div style="display: flex; gap: 10px;">
                                <div
                                    style="border: 1px solid #ddd; color: #666; padding: 5px 10px; border-radius: 15px; font-size: 12px;">
                                    取消预约</div>
                                <div
                                    style="background-color: #007aff; color: white; padding: 5px 10px; border-radius: 15px; font-size: 12px;">
                                    导航前往</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                            <div style="font-weight: bold;">北京大学第一医院</div>
                            <div style="color: #f44336; font-weight: bold;">待就诊</div>
                        </div>

                        <div
                            style="display: flex; margin-bottom: 15px; border-bottom: 1px solid #f5f5f5; padding-bottom: 15px;">
                            <img src="https://via.placeholder.com/50"
                                style="width: 50px; height: 50px; border-radius: 25px; margin-right: 10px;">
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between;">
                                    <div style="font-weight: bold;">李医生 · 骨科</div>
                                    <div style="color: #f44336;">￥120</div>
                                </div>
                                <div style="font-size: 12px; color: #666; margin: 5px 0;">副主任医师</div>
                                <div style="font-size: 12px; color: #007aff;">2023-07-25（下周二） 09:00</div>
                            </div>
                        </div>

                        <div style="display: flex; justify-content: space-between;">
                            <div style="font-size: 12px; color: #666;">就诊人：张大山</div>
                            <div style="display: flex; gap: 10px;">
                                <div
                                    style="border: 1px solid #ddd; color: #666; padding: 5px 10px; border-radius: 15px; font-size: 12px;">
                                    取消预约</div>
                                <div
                                    style="background-color: #007aff; color: white; padding: 5px 10px; border-radius: 15px; font-size: 12px;">
                                    导航前往</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部标签栏 -->
                <div class="tab-bar">
                    <div class="tab-item">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-hospital"></i>
                        <span>医院</span>
                    </div>
                    <div class="tab-item active">
                        <i class="fas fa-calendar-check"></i>
                        <span>预约</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            <div class="screen-title">我的预约页</div>
        </div>

        <!-- 个人中心页面 -->
        <div>
            <div class="screen">
                <div class="status-bar">
                    <span>中国移动</span>
                    <span class="time">15:10</span>
                    <span>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-three-quarters"></i>
                    </span>
                </div>
                <div class="nav-bar">
                    <div class="title">个人中心</div>
                    <div><i class="fas fa-cog" style="font-size: 18px; color: #333;"></i></div>
                </div>
                <div class="content" style="padding: 0; background-color: #f5f5f5;">
                    <!-- 个人信息 -->
                    <div style="background-color: white; padding: 20px 15px; display: flex; align-items: center;">
                        <img src="https://via.placeholder.com/70"
                            style="width: 70px; height: 70px; border-radius: 35px; margin-right: 15px;">
                        <div style="flex: 1;">
                            <div style="font-weight: bold; font-size: 18px; margin-bottom: 5px;">张三</div>
                            <div style="font-size: 14px; color: #666;">手机号：186****7890</div>
                        </div>
                        <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                    </div>

                    <!-- 功能区 -->
                    <div style="background-color: white; margin-top: 10px; padding: 15px;">
                        <div
                            style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; text-align: center;">
                            <div>
                                <div
                                    style="width: 50px; height: 50px; border-radius: 25px; background-color: #e3f2fd; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-clipboard-list" style="font-size: 22px; color: #1976d2;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">我的预约</div>
                            </div>
                            <div>
                                <div
                                    style="width: 50px; height: 50px; border-radius: 25px; background-color: #e8f5e9; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-file-medical" style="font-size: 22px; color: #388e3c;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">健康档案</div>
                            </div>
                            <div>
                                <div
                                    style="width: 50px; height: 50px; border-radius: 25px; background-color: #fff3e0; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-credit-card" style="font-size: 22px; color: #f57c00;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">我的医保</div>
                            </div>
                            <div>
                                <div
                                    style="width: 50px; height: 50px; border-radius: 25px; background-color: #fce4ec; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-heart" style="font-size: 22px; color: #d81b60;"></i>
                                </div>
                                <div style="font-size: 12px; margin-top: 5px;">我的收藏</div>
                            </div>
                        </div>
                    </div>

                    <!-- 就诊人管理 -->
                    <div style="background-color: white; margin-top: 10px;">
                        <div style="padding: 15px; font-weight: bold; border-bottom: 1px solid #f5f5f5;">就诊人管理</div>

                        <div style="display: flex; padding: 15px; border-bottom: 1px solid #f5f5f5;">
                            <div style="flex: 1;">
                                <div style="display: flex; align-items: center; margin-bottom: 5px;">
                                    <div style="font-weight: bold; margin-right: 10px;">张三（本人）</div>
                                    <div
                                        style="background-color: #e8f5e9; color: #388e3c; font-size: 10px; padding: 2px 5px; border-radius: 3px;">
                                        默认</div>
                                </div>
                                <div style="font-size: 12px; color: #666;">35岁 | 男 | 身份证号：11010119******1234</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                        </div>

                        <div style="display: flex; padding: 15px;">
                            <div style="flex: 1;">
                                <div style="font-weight: bold; margin-bottom: 5px;">张大山（父亲）</div>
                                <div style="font-size: 12px; color: #666;">65岁 | 男 | 身份证号：11010119******5678</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                        </div>

                        <div style="padding: 15px; display: flex; align-items: center; color: #007aff;">
                            <i class="fas fa-plus-circle" style="margin-right: 10px;"></i>
                            <div>添加就诊人</div>
                        </div>
                    </div>

                    <!-- 更多服务 -->
                    <div style="background-color: white; margin-top: 10px;">
                        <div style="padding: 15px; font-weight: bold; border-bottom: 1px solid #f5f5f5;">更多服务</div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 15px; border-bottom: 1px solid #f5f5f5;">
                            <div style="display: flex; align-items: center;">
                                <i class="fas fa-headset" style="color: #1976d2; margin-right: 10px;"></i>
                                <div>客服中心</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 15px; border-bottom: 1px solid #f5f5f5;">
                            <div style="display: flex; align-items: center;">
                                <i class="fas fa-comment-dots" style="color: #f57c00; margin-right: 10px;"></i>
                                <div>意见反馈</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                        </div>

                        <div
                            style="display: flex; justify-content: space-between; padding: 15px; border-bottom: 1px solid #f5f5f5;">
                            <div style="display: flex; align-items: center;">
                                <i class="fas fa-shield-alt" style="color: #388e3c; margin-right: 10px;"></i>
                                <div>隐私政策</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                        </div>

                        <div style="display: flex; justify-content: space-between; padding: 15px;">
                            <div style="display: flex; align-items: center;">
                                <i class="fas fa-info-circle" style="color: #d81b60; margin-right: 10px;"></i>
                                <div>关于我们</div>
                            </div>
                            <i class="fas fa-chevron-right" style="color: #ccc;"></i>
                        </div>
                    </div>
                </div>
                <!-- 底部标签栏 -->
                <div class="tab-bar">
                    <div class="tab-item">
                        <i class="fas fa-home"></i>
                        <span>首页</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-hospital"></i>
                        <span>医院</span>
                    </div>
                    <div class="tab-item">
                        <i class="fas fa-calendar-check"></i>
                        <span>预约</span>
                    </div>
                    <div class="tab-item active">
                        <i class="fas fa-user"></i>
                        <span>我的</span>
                    </div>
                </div>
            </div>
            <div class="screen-title">个人中心页</div>
        </div>
    </div>
</body>

</html>